<!--
 * @Author: yangzr 1076420747@qq.com
 * @Date: 2022-09-20 17:56:40
 * @LastEditors: yangzr 1076420747@qq.com
 * @LastEditTime: 2022-11-28 10:25:58
 * @FilePath: \ktgj-crm\src\views\vipManager\vipResourceTrace.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="vipResourceVisit">
    <!-- 筛选条件 -->
    <div class="container-query">
      <el-form :inline="true" size="mini" v-model="selectDate">
        <!-- <el-form-item label="会员卡号">
          <el-input
            size="mini"
            v-model="selectDate.a"
            placeholder="会员卡号"
          ></el-input>
        </el-form-item>
        <el-form-item label="会员手机号">
          <el-input
            size="mini"
            v-model="selectDate.a"
            placeholder="会员手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="回访跟进记录">
          <el-select v-model="selectDate.a" clearable placeholder="请选择">
            <el-option
              v-for="item in backList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注册年份">
          <el-input
            size="mini"
            v-model="selectDate.a"
            placeholder="注册年份"
          ></el-input>
        </el-form-item>
        <el-form-item label="增值权益时长：">
          <el-checkbox-group v-model="checkList" size="mini">
            <el-checkbox label="1">非会员</el-checkbox>
            <el-checkbox label="2">有效期内</el-checkbox>
            <el-checkbox label="3">过期半年内</el-checkbox>
            <el-checkbox label="4">过期1年内</el-checkbox>
            <el-checkbox label="6">过期2年内</el-checkbox>
            <el-checkbox label="7">过期3年以上</el-checkbox>
            <el-checkbox label="8">近一年有过订单</el-checkbox>
          </el-checkbox-group>
        </el-form-item><br>-->
        <el-form-item label="未回访时间段">
          <el-date-picker class="inputClass" v-model="selectDate.visitTimeBegin" type="date" placeholder="选择日期">
          </el-date-picker>--
          <el-date-picker class="inputClass" v-model="selectDate.distributeTime" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="分配时间">
          <el-date-picker class="inputClass" v-model="selectDate.distributeTimeBegin" type="date" placeholder="选择日期">
          </el-date-picker>--
          <el-date-picker class="inputClass" v-model="selectDate.distributeTimeEnd" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-date-picker class="inputClass" v-model="selectDate.regTimeBegin" type="date" placeholder="选择日期"
            :value-format="format">
          </el-date-picker>--
          <el-date-picker class="inputClass" v-model="selectDate.regTimeEnd" type="date" :value-format="format"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="有效时间">
          <el-date-picker class="inputClass" :value-format="format" v-model="selectDate.validTimeBegin" type="date"
            placeholder="选择日期">
          </el-date-picker>--
          <el-date-picker class="inputClass" :value-format="format" v-model="selectDate.validTimeEnd" type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="seachBtn">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table class="tableClass" :data="tableData" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" size="mini" border>
      <el-table-column prop="customerId" label="会员编号"> </el-table-column>
      <el-table-column prop="regiesttime" label="注册时间"> </el-table-column>
      <el-table-column prop="creattime" label="创建时间"> </el-table-column>
      <!-- <el-table-column prop="createpersonid" label="创建人"  > -->
      <!-- </el-table-column> -->
      <el-table-column prop="employeeName" label="资源归属人"></el-table-column>
      <!-- <el-table-column prop="updatepersonid" label="修改人"></el-table-column> -->
      <!-- <el-table-column prop="memo" label="备注"></el-table-column> -->
      <el-table-column prop="customerName" label="会员姓名"></el-table-column>
      <el-table-column prop="visitTime" label="回访时间"></el-table-column>
      <el-table-column prop="distributeTime" label="分配资源时间"></el-table-column>
      <el-table-column prop=" cardValidtime" label="会员卡有效时间"></el-table-column>
      <el-table-column prop="customerPhone" label="会员手机号"></el-table-column>
      <!-- <el-table-column prop="updatepersonid" label="修改人"></el-table-column> -->
      <!-- <el-table-column prop="a" label="会员资产">
        <template slot-scope="scope">
          <el-tooltip placement="bottom"  effect="light">
            <div slot="content">
             <div class="tooltipBox">
              <div class="tooltipBox_top">可用积分：0</div>
              <div class="tooltipBox_bottom">
                <div class="tooltipBox_bottom-l">
                  <span>可用预留款：￥0</span><br>
                  <span>可用出行抵扣券：￥0</span><br>
                  <span>可用商品抵扣券：￥0</span><br>
                  <span>旅游抵扣券：￥0</span><br>
                </div>
                <div class="tooltipBox_bottom-r">
                   <span>可用预留款：￥0</span><br>
                  <span>可用出行抵扣券：￥0</span><br>
                  <span>可用商品抵扣券：￥0</span><br>
                  <span>旅游抵扣券：￥0</span><br>
                </div>
              </div>
             </div>
            </div>
            <el-button>查看详情</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
       <el-table-column prop="a" label="注册时间/卡有效日期" width="170">
        <template>
          
        </template>
      </el-table-column>
      <el-table-column prop="a" label="增值权益时长"></el-table-column>
      <el-table-column prop="a" label="客户电话"></el-table-column>
      <el-table-column prop="a" label="客户微信"></el-table-column> -->
      <el-table-column prop="a" label="回访跟进记录" width="120" center>
        <template slot-scope="scope">
          <el-button slot="reference" type="primary" size="mini" @click="addvisit(scope.row)">填写</el-button>
        </template>
      </el-table-column>

      <el-table-column prop="a" label="跟进记录">
        <template slot-scope="scope">
          <el-button slot="reference" type="primary" size="mini" @click="shelves(scope.row)">查看回访历史</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加回访记录弹窗 -->
    <el-dialog title="添加" :visible.sync="addvivstDialogVisible" width="30%" center :before-close="addvivsthandleClose">
      <el-form :model="addvisitDate" :rules="rules" ref="addvisitDate" label-width="100px" class="demo-ruleForm">
        <el-form-item label="回访类型" prop="visitType">
          <el-select v-model="addvisitDate.visitType" placeholder="请选择活动区域">
            <el-option v-for="item in backList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回访内容" prop="visitContent">
          <el-input v-model="addvisitDate.visitContent" style="width: 220px" type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addvivsthandleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm('addvisitDate')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 回访记录弹窗 -->
    <el-dialog title="回访记录" :visible.sync="vivstHistreyDialogVisible" width="40%" center>
      <el-table :data="historytableData" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" size="mini" border>
        <el-table-column prop="visitType" label="回访类型" width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.visitType == '0'">重点记录</template>
            <template v-if="scope.row.visitType == '1'">待跟进</template>
            <template v-if="scope.row.visitType == '2'">已购买</template>
            <template v-if="scope.row.visitType == '3'">过两天联系</template>
            <template v-if="scope.row.visitType == '4'">未接通</template>
            <template v-if="scope.row.visitType == '5'">停机</template>
            <template v-if="scope.row.visitType == '6'">打通即挂</template>
            <template v-if="scope.row.visitType == '7'">多次联系无果</template>
            <template v-if="scope.row.visitType == '8'">用不办理</template>
          </template>
        </el-table-column>
        <el-table-column prop="visitContent" label="回访内容">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="historyhandleSizeChange" @current-change="historyhandleCurrentChange"
        :current-page="historycurrentPage" :page-sizes="[10, 15, 20]" :page-size="historypageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="historypageTotal">
      </el-pagination>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
    <!-- 记录分页 -->
  </div>
</template>

<script>
  export default {
    name: "vipResourceVisit",

    data() {
      return {
        format: "yyyy-MM-dd",

        // 添加回访记录弹窗
        addvivstDialogVisible: false,
        // 回访记录弹窗
        vivstHistreyDialogVisible: false,
        // 添加验证他
        rules: {
          visitType: [{
            required: true,
            message: "请选择回访类型",
            trigger: "change"
          }, ],
          visitContent: [{
            required: true,
            message: "请输入回访内容",
            trigger: "blur"
          }, ],
        },
        // 表格数据
        tableData: [],
        // 回访记录
        historytableData: [],
        // 回访记录下拉数据
        backList: [{
            value: "0",
            label: "重点客户",
          },
          {
            value: "1",
            label: "待跟进",
          },
          {
            value: "2",
            label: "已购买",
          },
          {
            value: "3",
            label: "过两天联系",
          },
          {
            value: "4",
            label: "未接通",
          },
          {
            value: "5",
            label: "停机",
          },
          {
            value: "6",
            label: "打通即挂",
          },
          {
            value: "7",
            label: "多次联系无果",
          },
          {
            value: "8",
            label: "永不办理",
          },
        ],
        // 权益增张多选框
        checkList: [],
        // 查询数据
        selectDate: {
          regTimeBegin: "",
          regTimeEnd: "",
          validTimeBegin: "",
          validTimeEnd: "",
          visitTimeBegin: "",
          visitTimeEnd: "",
          TimeBegin: "",
          distributeTimeEnd: "",
        },
        // 新增回访记录
        addvisitDate: {
          vipresourceId: "",
          visitContent: "",
          visitType: "",
        },
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        historypageSize: 10,
        historycurrentPage: 1,
        historypageTotal: 0,
      };
    },
    watch: {},

    methods: {
      // 确定
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getaddVisit();
            this.addvisitDate.vipresourceId = "",
              this.addvisitDate.visitContent = "",
              this.addvisitDate.visitType = ""
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      // 新增回访记录
      addvisit(row) {
        console.log(row);
        this.addvisitDate.vipresourceId = row.vipresourceId;
        this.addvivstDialogVisible = true;
      },
      // 查询回访记录按钮
      shelves(row) {
        console.log(row)
        this.getreturnvisitlist(row.vipresourceId);
        this.vivstHistreyDialogVisible = true;
      },
      // 查询在职的VIP经理资源

      getvipresourceList() {
        localStorage.setItem("isToken", true);
        this.$axios
          .getvipresourceList({
            regTimeBegin: this.selectDate.regTimeBegin,
            regTimeEnd: this.selectDate.regTimeEnd,
            validTimeBegin: this.selectDate.validTimeBegin,
            validTimeEnd: this.selectDate.validTimeEnd,
            visitTimeBegin: this.selectDate.visitTimeBegin,
            visitTimeEnd: this.selectDate.visitTimeEnd,
            TimeBegin: this.selectDate.TimeBegin,
            distributeTimeEnd: this.selectDate.distributeTimeEnd,
          })
          .then((res) => {
            
            console.log(res);
            if (res.code == "200") {

              this.tableData = res.data;
              this.pageTotal = res.total;
            }
          });
      },
      // 查询回访记录
      getreturnvisitlist(vipresourceId) {
        localStorage.setItem("pageNum", this.historycurrentPage);
        localStorage.setItem("pageSize", this.historypageSize);
        this.$axios.getreturnvisitlist({
          vipresourceId: vipresourceId
        }).then((res) => {
          // localStorage.setItem("pageNum", this.historycurrentPage);
          // localStorage.setItem("pageSize", 10);
          console.log(res);
          if (res.code == "200") {
            this.historytableData = res.data;
            this.historypageTotal = res.total;
          }
        });
      },
      seachBtn() {
        localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.getvipresourceList()
      },

      // 添加回访记录
      getaddVisit() {

        this.$axios
          .getaddVisit({
            vipresourceId: this.addvisitDate.vipresourceId,
            visitContent: this.addvisitDate.visitContent,
            visitType: this.addvisitDate.visitType,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.addvivstDialogVisible = false;
            }
          });
      },
      //  弹窗关闭清除内容
      addvivsthandleClose() {
        this.addvivstDialogVisible = false
        this.addvisitDate.vipresourceId = "",
          this.addvisitDate.visitContent = "",
          this.addvisitDate.visitType = ""
      },

      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getvipresourceList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);

        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getvipresourceList();
        // orders = res.data;
      },
      search() {
        localStorage.setItem("pageNum", this.currentPage);
        localStorage.setItem("pageSize", 10);
        this.getvipresourceList();
      },
      // 记录分页
      //分页
      historyhandleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getreturnvisitlist();
        this.historypageSize = value;
      },
      historyhandleCurrentChange(value) {
        console.log("2", value);

        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.historypageSize);
        this.getreturnvisitlist();
        // orders = res.data;
      },
      historysearch() {
        localStorage.setItem("pageNum", this.historycurrentPage);
        localStorage.setItem("pageSize", 10);
        this.getreturnvisitlist();
      },
    },

    mounted() {
      this.getvipresourceList();
    },
  };
</script>
<style scoped>
  .tableClass {
    margin: 30px 0 0 10px;
  }

  .container-query {
    margin: 30px 0 0 10px;
  }

  .inputClass {
    width: 150px;
  }

  .tooltipBox_top {
    height: 24x;
  }

  .tooltipBox_bottom {
    display: flex;
  }

  .tooltipBox_bottom-l {
    border-right: 1px solid #636464;
    padding-right: 5px;
  }

  .tooltipBox_bottom-r {
    padding-left: 5px;
  }
</style>